{% extends 'base.html' %}

{% block body %}
    <div id="parallax"><!-- Parallax Area -->

        <!-- Banner Area -->
        <section class="pages_banner_area">
            <img src="../static/images/parallax-layer/banner-layer-3.png" alt="" class="layer layer_1"
                 data-depth="0.10">
            <div class="container">
                <h2>未来分析</h2>
                <ol class="breadcrumb">
                    <li><a href={{ url_for('index') }}>首页</a></li>
                    <li><a href={{ url_for('future') }} class="active">未来分析</a></li>
                </ol>
            </div>
        </section>
        <!-- End Banner Area -->

        <!-- Stack-bar Area -->
        <section class="pricing_area pa_3">
            <div class="container">
{#                <h2 class="tittle">数据预估</h2>#}
                <div class="row" style="margin: 0 auto;">
                    <form method='GET' action='/'>
                        <!-- Main component for a primary marketing message or call to action -->
                        {{ s_charts|safe }}
                    </form>
                </div>
                <p style="margin-bottom: 10%;padding-top: 3%">依据HDI(人类发展指数)，我们将世界各国分为了四个层级。在每个层级中，患病率高的癌症种类皆不同：</br>
                    Very High HDI(极高的人类发展指数)：肺癌、结直肠癌、乳腺癌、胃癌、肝癌</br>
                    High HDI(较高的人类发展指数)：肺癌、结直肠癌、乳腺癌、前列腺癌、膀胱癌</br>
                    Medium HDI(中等的人类发展指数)：肺癌、结直肠癌、乳腺癌、宫颈癌、唇、口腔癌</br>
                    Low HDI(极低的人类发展指数)：宫颈癌癌、结直肠癌、乳腺癌、前列腺癌、肝癌</br>
                    对比2020年的数据，预估在2040年每个层级新增病例数皆会上涨。其中，Very High HDI层级的新增病例数增幅是最大的。
                </p>
                <div class="row" style="margin: 0 auto;padding-left: 15%">
                    <form method='GET' action='/'>
                        <!-- Main component for a primary marketing message or call to action -->
                        {{ liq_charts|safe }}
                    </form>
                </div>
                <p style="margin-bottom: 10%;margin-top: 5%">
                    根据计算，预估Very High HDI的增长率将高达96%。而High HDI、Medium HDI、Low HDI的增长率分别是64%、56%和32%。
                </p>
            </div>
        </section>
        <!-- End Stack-bar Area -->

        <!-- Feature Work Area -->
        <section class="feature_work_area fwa_2 fwa_3">
            <img src="../static/images/parallax-layer/feature-work-bg.png" alt="" class="layer layer_1"
                 data-depth="0.20">
            <div class="container">
                <h2 class="tittle">接下来</h2>
                <div class="row">
                    <div class="col-lg-6 feature_img wow fadeInLeft">
                        <img src="../static/images/fetures_bg.png" alt="" class="fetures_bg layer" data-depth="0.10">
                        <img src="../static/images/computer_doctor_woman.png" alt="">
                    </div>
                    <div class="col-lg-6 feature_content wow fadeInRight">
                        <h2>病因追查</h2>
                        <p>根据数据分析形成癌症的主要诱因，并在此基础上做出一定预防建议。</p>
                        <div style="display: flex;flex-direction: row">
                            <a href={{ url_for('causes') }} class="theme_btn">下一项</a>
                            <a href={{ url_for('index') }} class="theme_btn" style="margin-left: 10%">回到首页</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Feature Work Area -->

    </div>
    <!-- End Parallax -->

{% endblock %}
